<template>
  <wakin-list-temp
    ref="temp"
    empty-mode="data"
    page-num-key="page"
    page-size-key="limit"
    :page-start-num="1"
    :res-data-key="['data', 'list']"
    :res-total-key="['data', 'count']"
    :res-code-key="['code']"
    :status-code="errorCode.success"
    :empty-icon="$data.icon"
    :bottom-load-text="$data.loadText"
    :show-bottom-load-text="false"
    :custom-empty="false"
    :show-load-toast="$data.showLoadToast"
    @loadData="getDatas"
    @loadStatus="onLoadStatus"
  >
    <!--插槽:数据列表-->
    <template #render>
      <view class="list-box">
        <!--数据卡片 item.orderServiceId-->
        <view
          class="list-item"
          v-for="(item, index) of $data.list"
          :key="index"
        >
          <view class="top" @tap.stop="details(item)">
            <view class="top_img">
              <image :src="item._picurl"></image>
            </view>
            <view class="top_content">
              <view class="top_content--title">
                <text class="top_content--title_name">
                  {{ item.serviceTitle }}
                </text>
                <text
                  class="top_content--title_status text-nowarp"
                  :style="[item._statusConfig.style]"
                >
                  {{ item._statusConfig.label }}
                </text>
              </view>
              <block
                v-if="
                  [orderStatus.awaitPay, orderStatus.awaitReservation].includes(
                    Number(item.status)
                  )
                "
              >
                <view
                  class="top_content--time"
                  v-if="item.status == orderStatus.awaitPay"
                >
                  {{ item._countDown }}分钟之内未支付，系统自动取消
                </view>
                <view
                  class="top_content--time"
                  v-if="item.status == orderStatus.awaitReservation"
                >
                  随时可约，立即上门
                </view>
              </block>
              <block v-else>
                <view class="top_content--time">{{ item._time }}</view>
                <view class="top_content--address">{{ item.address }}</view>
              </block>
            </view>
          </view>
          <view class="bottom">
            <view class="flex align-center" v-if="item._btns.length > 0">
              <!-- <view v-for="(btn, btnIndex) of item._btns" :key="btnIndex">
                <view v-show="btn.key == orderActionEnum.refund">
                  <mg-pay-button
                    :mode="sdkData.mode"
                    :orderId="sdkData.orderId"
                    :orderStatus="sdkData.orderStatus"
                    :refundId="sdkData.refundId"
                    :refundTotalAmount="sdkData.refundTotalAmount"
                    :applyRefundParams="sdkData.applyRefundParams"
                    :localNo="$data.localNo"
                    :douYinPayJson="$data.douYinPayJson"
                    :workSecondPrice="$data.workSecondPrice"
                  ></mg-pay-button>
                </view>
                <view
                  v-show="btn.key != orderActionEnum.refund"
                  class="btn"
                  @tap.stop="onItemAction(item, btn)"
                  :style="[btn.style]"
                >
                  {{ btn.label }}
                </view>
              </view> -->
              <view
                class="btn"
                v-for="(btn, btnIndex) of item._btns"
                :key="btnIndex"
                :style="[btn.style]"
                @tap.stop="onItemAction(item, btn)"
              >
                {{ btn.label }}
              </view>
            </view>
            <view
              class="btn-"
              :key="item._btns.length + 1"
              :style="[customBtn.style]"
              @tap.stop="onItemAction(item, customBtn)"
            >
              {{ customBtn.label }}
            </view>
          </view>
        </view>
      </view>
    </template>
    <!--插槽:自定义空提示-->
    <template #empty>
      <!-- <view class="empty" slot="empty"> -->
      <image :src="$data.icon"></image>
      <!-- </view> -->
    </template>
  </wakin-list-temp>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, toRef, toRefs, watch } from "vue";
import { getOrderList as requestApi } from "@/api/Interface/order";
import BasicConfig from "@/utils/config";
import errorCode from "../../../../utils/http/errorCode";
import { jumpPage } from "../../../../utils/route/route";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import {
  customBtn,
  hotelOrderAfterSaleStatus,
  hotelOrderAfterSaleStatusConfig,
  orderActionEnum,
  orderStatus,
  orderStatusConfig,
} from "../../../../enums/order";
import { receiptOrder } from "../../../../api/Interface/order";
import { useImgSrc } from "../../../../hooks/useImg";
const Instance = getCurrentInstance();
const $vm = Instance?.appContext.config.globalProperties;
const $emit = defineEmits(["total", "clickItem", "action"]);
const temp = ref();
const loadShow = ref(false);
const $data = reactive({
  list: [],
  loadText: {
    loadmore: "轻轻上拉",
    loading: "努力加载中",
    nomore: "没有数据了",
  },
  showLoadToast: false, // 是否显示加载中toast
  listLoad: true, // 组件数据加载状态
  icon: $vm.$ListIcon.search,
});
/** 如果list中有需要格式化或操作的字段,则进行定制化操作 */
const getDatas = (e, total, source) => {
  loadShow.value = false;
  if (e && e.length > 0) $data.list = [...e];
  $data.list.forEach((item) => {
    // * 6.待评价
    // * 7.已完成
    // 抖音小程序关闭评价入口,所有待评价数据前端变更为已完成2025-08-28 08:51:36
    if (item.status == orderStatus.awaitComment) {
      item.status = orderStatus.final;
    }
    const { countDown } = item;
    item._picurl = useImgSrc(item.picurl);
    item._time = item.firstStartServicedAt
      ? dayjs(item.firstStartServicedAt)
          .locale("zh-cn")
          .format("YYYY-MM-DD dddd HH:mm")
      : "";
    if (countDown) {
      // 待支付订单 多少分钟后失效
      const countDownTime = Number(countDown);
      if (countDownTime > 60) {
        item._countDown = (countDownTime / 60).toFixed(0);
      } else item._countDown = 1;
    }
    item._statusConfig = orderStatusConfig[item.status] ?? {
      value: null,
      label: "",
      style: {
        color: "#111111",
      },
      getBtns: () => [],
    };
    const btns = item._statusConfig.getBtns(item.status);
    const asConfig = hotelOrderAfterSaleStatusConfig[item.firstAfterSaleStatus];
    item._btns = btns;
    if (
      item.firstAfterSaleStatus != hotelOrderAfterSaleStatus.normal &&
      asConfig
    ) {
      item._statusConfig = asConfig;
      item._statusConfig.label = item._statusConfig.orderLabel;
    }
    if (
      item.firstAfterSaleStatus != hotelOrderAfterSaleStatus.normal &&
      item.status == orderStatus.awaitReservation
    ) {
      item._btns = [];
    }
    // console.log(
    //   "item._statusConfig",
    //   uni.$u.deepClone(item._statusConfig),
    //   item.orderServiceId,
    //   item.localNo
    // );
  });
  $emit("total", total);
};
const onDemo = () => {
  console.log("onDemo~~~~~~~");
};
/** 获取列表组件数据加载状态 */
const onLoadStatus = (e) => {
  // $data.listLoad = e;
};
/** 连接列表通用子组件模版 */
const loadDatas = async (
  loadType = $vm.$ListLoadEnum.load,
  search,
  debounce = false,
  time = 1000
) => {
  loadShow.value = true;
  await temp.value.loadDatas({
    loadType,
    search,
    debounce,
    time,
    api: requestApi,
  });
};
/**
 * @description 返回item对象,组件类型key
 */
const details = (e) => {
  console.log("details~~~~~~~");
  $emit("clickItem", e);
};
const onItemAction = (item, btn) => {
  console.log("onItemAction~~~~~~~");
  $emit("action", item, btn);
};
defineExpose({
  loadDatas,
});
</script>

<style lang="scss" scoped>
.list-item {
  position: relative;
  margin-bottom: 30rpx;
  padding: 30rpx;
  background: #ffffff;
  border-radius: 20rpx;

  .top {
    display: flex;
    align-items: center;
    position: relative;
    height: auto;
    padding-bottom: 30rpx;
    &_img {
      width: 200rpx;
      height: 200rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
      }
    }
    &_content {
      width: calc(100% - 200rpx);
      padding-left: 30rpx;
      height: 100%;
      &--title {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        font-size: 34rpx;
        &_status {
          margin-left: 10rpx;
        }
        &_name {
          font-weight: 700;
          color: #111111;
        }
      }
      &--time {
        margin: 20rpx 0;
        color: #333333;
        font-size: 32rpx;
      }
      &--address {
        color: #666666;
        font-size: 32rpx;
      }
    }
  }
  .bottom {
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 30rpx 0 0 30rpx;
    height: 120rpx;
    .btn {
      margin-right: 20rpx;
      // &:not(:last-child) {
      //   margin-right: 20rpx;
      // }
    }
  }
}
</style>
